<template>
  <div class="user" style="width: 70%;margin: auto">
    <div style="line-height: 50px; font-size: 30px; color: dodgerblue; margin-top: 20px;">企业用户注册
    </div>
    <div style="background: #eeeeee;padding: 20px;margin-top: 30px">
      <div style="width: 74%;margin: auto;background: #ffffff;padding: 20px;">
        <el-form ref="userForm" :model="userForm" :rules="rules" label-width="100px" class="demo-userForm">
          <div class="title2">账号注册信息</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username" />
                <div class="asx" style="color: #aaaaaa">
                  请输入邮箱
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input v-model="userForm.password" autocomplete="off" type="password">
                  <i v-if="userForm.password !=='' && passwordPow > 0 " slot="suffix" style="color: #00ff00" class="el-input__icon el-icon-circle-check" /></el-input>
                <div class="asx" style="color: #aaaaaa">
                  请输入6-16个字母、数字
                </div>
                <div v-if="userForm.password !==''">
                  <div v-if="passwordPow === 1" class="el-form-item__error" style="color: #ff811a">
                    密码强度低
                  </div>
                  <div v-if="passwordPow === 2" class="el-form-item__error" style="color: orange">
                    密码强度中
                  </div>
                  <div v-if="passwordPow === 3" class="el-form-item__error" style="color: #c0ff11">
                    密码强度较高
                  </div>
                  <div v-if="passwordPow === 4" class="el-form-item__error" style="color: #00ff00">
                    密码强度高
                  </div></div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="确认密码" prop="passwordCheck">
                <el-input v-model="userForm.passwordCheck" autocomplete="off" type="password">
                  <i v-if="passwordIsCheck === true" slot="suffix" style="color: #00ff00" class="el-input__icon el-icon-circle-check" />
                </el-input>
                <div class="asx" style="color: #aaaaaa">
                  请再次输入密码
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item v-if="regpro === true" style="text-align: center">
            <el-button :disabled="false" style="margin-left: -100px;" type="primary" @click="submitForm('userForm')">企业用户注册</el-button>
            <el-button @click="onClose()">返回</el-button>
          </el-form-item>
          <el-form-item v-if="regpro === false" style="text-align: center">
            <el-button disabled style="margin-left: -100px;" type="info">企业用户注册</el-button>
            <el-button @click="onClose()">返回</el-button>
          </el-form-item>

        </el-form>
        <el-form
          style="width: 350px;
    margin: auto;"
        >  <el-form-item label="阅读并接受">
          <el-checkbox-group v-model="regpro" style="float: left;margin-right: 5px">
            <el-checkbox v-if="regpro == true" label="" name="type" @change="regpro = false" />
            <el-checkbox v-if="regpro == false" label="" name="type" @change="regpro = true" />
          </el-checkbox-group><router-link :to="'/protocol'" class="link-type" target="_blank">中小企业数智生态服务平台注册协议</router-link>
        </el-form-item></el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { regAgent } from '@/api/user'
import { encryptDes } from '@/utils/des'
import { validEmail } from '@/utils/validate'
export default {
  name: 'UserReg',
  components: {},
  data() {
    const validatePasswordCheck = (rule, value, callback) => {
      if (value !== this.userForm.password) {
        this.passwordIsCheck = false
        return callback(new Error('两次密码不一致'))
      } else {
        this.passwordIsCheck = true
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      let modes = 0
      // 正则表达式验证符合要求的
      if (!value) {
        return callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        this.passwordPow = 0
        return callback(new Error('请输入6位以上密码'))
      } else if (value.length > 15) {
        this.passwordPow = 0
        return callback(new Error('密码最大16位'))
      } else {
        if (value.length < 1) return modes
        // if (value.length > 6) modes++
        if (/\d/.test(value)) modes++ // 数字
        if (/[a-z]/.test(value)) modes++ // 小写
        if (/[A-Z]/.test(value)) modes++ // 大写
        if (/\W/.test(value)) modes++ // 特殊字符
        this.passwordPow = modes
        if (modes === 0) {
          return callback(new Error('密码强度弱'))
        } else {
          callback()
        }
      }
    }
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名'))
      } else if (!validEmail(value)) {
        callback(new Error('请输入正确电子邮件地址'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      passwordPow: 0,
      passwordIsCheck: false,
      buttonText: '发送验证码',
      flag: true,
      isDisabled: false, // 是否禁止点击发送验证码按钮
      regpro: false,
      userForm: {
        username: '',
        password: '',
        passwordCheck: '',
        code: ''
      },
      userInfoForm: [],
      rules: {
        password: [
          { required: true, validator: validatePassword }
        ],
        passwordCheck: [
          { required: true, validator: validatePasswordCheck }

        ],
        username: [
          { required: true, trigger: 'blur', validator: validateMobile }
        ]
      }
    }
  },
  created() {
    console.log(this.regpro)
  },
  methods: {
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.loading = true
          const username = encryptDes(this.userForm.username.trim())
          const password = encryptDes(this.userForm.password)
          let identifier = '0'
          identifier = this.$route.query.identifier
          console.log(identifier)
          if (identifier === undefined) {
            this.$message({
              message: '注册识别码错误', type: 'error'
            })
          } else if (identifier.length !== 4) {
            this.$message({
              message: '注册识别码错误', type: 'error'
            })
          } else {
            regAgent({ username: username, password: password, identifier: identifier }).then(response => {
              if (response.result === 0) {
                this.$message({
                  message: response.msg, type: 'error'
                })
              } else if (response.result === 1) {
                localStorage.setItem('provisionalToken', response.msg)
                this.$message({
                  message: '注册成功', type: 'success'
                })
                this.$router.push('/login')
              } else {
                this.$message({
                  message: '提交失败', type: 'warning'
                })
              }
              this.loading = false
            })
          }
        } else {
          return false
        }
      })
    },
    onClose() {
      this.$router.push('/')
    },
    onRegPro() {
      if (this.regpro === false) {
        this.regpro = true
        console.log(this.regpro)
      } else {
        this.regpro = false
        console.log(this.regpro)
      }
    }

  }
}
</script>
<style>
</style>
<style scoped>
.asx {
  font-size: 14px;
  line-height: 20px;
  margin-top: 5px
}

.title2 {
  line-height: 40px;
  font-size: 20px;
  color: darkgray;
  border-bottom: 1px #cccccc solid;
  margin-bottom: 20px;
}
.code2{
  position:absolute;
  right: 0;
  top: 0;
  height: 32px;

}
.procedure .grid-content :after {
  content: "";
  width: 135px;
  height: 2px;
  position: absolute;
  border: 2px dotted #f2ead8;
  margin-top: 54px;
  margin-left: 125px;
}

.procedure .title_icon:after {
  border: 0px;
}
</style>
